<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./assets/libs/jquery/jquery.min.js"></script>
    <script src="./assets/libs/echats/echarts.min.js"></script>
    <script src="http://api.map.baidu.com/api?type=webgl&v=3.0&ak=71E15B3d67c84a6590b2564fe99f60f2"></script>

    <style>
        [v-cloak] {
            display: none !important;
        }
        
        html,
        body,
        #container {
            overflow: hidden;
            /* width: 100%; */
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        
        .info {
            z-index: 999;
            width: auto;
            min-width: 22rem;
            padding: .75rem 1.25rem;
            margin-left: 1.25rem;
            position: fixed;
            top: 1rem;
            background-color: #fff;
            border-radius: .25rem;
            font-size: 14px;
            color: #333;
            font-weight: bold;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        }
        
        .header {
            z-index: 999;
            justify-content: space-between;
            padding: 0 10px 0 20px;
            color: #fff;
            display: flex;
            align-items: center;
            position: absolute;
            top: 0;
            height: 60px;
            width: 100%;
            background-color: rgba(0, 0, 0, .2);
        }
        
        .navBar {
            font-size: 20px;
        }
        
        .navBarItem {
            /*height: 40px;*/
            margin: 20px;
            padding-bottom: 10px;
            /*border-bottom: 4px solid #fff;*/
        }
        
        .activeNavBarItem {
            border-bottom: 4px solid #fff;
            color: rgb(227, 197, 57);
        }
        
        .left {
            z-index: 111;
            padding: 10px 10px 0;
            color: #fff;
            display: flex;
            position: absolute;
            top: 100px;
            left: 10px;
            /*height: 300px;*/
            /*width: 20%;*/
            /*background-color: rgba(0, 0, 0, .2);*/
        }
        
        .right {
            width: 30%;
            z-index: 111;
            padding: 10px 10px 0;
            color: #fff;
            position: absolute;
            top: 100px;
            right: 40px;
            /*height: 300px;*/
        }
        
        .right .top {
            width: 100%;
            /*width: 20%;*/
            padding: 10px;
            background-color: rgba(0, 0, 0, .5);
        }
        
        .right .bottom {
            margin-top: 5px;
            width: 100%;
            /*width: 20%;*/
            padding: 10px;
            background-color: rgba(0, 0, 0, .5);
        }
        
        .left .leftBox .top {
            margin-bottom: 5px;
            padding: 10px;
            display: flex;
            align-items: center;
            background-color: rgba(0, 0, 0, .5);
        }
        
        .left .leftBox .top .zuo {
            border: 1px solid rgb(57, 91, 116);
            border-radius: 5px;
        }
        
        .left .leftBox .top .you {
            display: flex;
            justify-content: space-between;
        }
        
        .left .leftBox .bottom {
            padding: 10px 10px 0;
            background-color: rgba(0, 0, 0, .5);
        }
        
        .borderBottom {
            border-bottom: 2px solid rgb(125, 133, 154);
        }
        
        .left .rightBox .top,
        .left .rightBox .bottom {
            border-radius: 8px;
            padding: 5px 0px 5px 2px;
            width: 200px;
            background-color: rgba(0, 0, 0, .5);
        }
        
        .defaultDengClass {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: rgb(237, 8, 15);
        }
        
        .guandengClass {
            background-color: rgb(5, 253, 6);
        }
        
        .contentItem {
            padding: 10px 0;
            margin-top: 10px;
            display: flex;
        }
        
        .contentItemActive {
            background-color: rgba(31, 60, 79, .5);
        }
        
        .footer {
            z-index: 111;
            color: #fff;
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .footerItem {
            margin-right: 20px;
        }
        
        #oneTime {
            visibility: hidden;
            left: -999px;
        }
        
        #rightOne {
            visibility: hidden;
            right: -999px;
        }
        
        #twoTime {
            visibility: hidden;
            left: -999px;
        }
        
        #rightTwo {
            visibility: hidden;
            right: -999px;
        }
    </style>
</head>

<body style="position: relative; height: 100% ;">
    <div id="main" style=" height: 100% ;">
        <!-- 地图 -->
        <div id="container">

        </div>

        <!-- 头部 -->
        <div class="header">
            <div style="font-size: 28px; display: flex; ">城市照明管理平台软件</div>
            <div style="display: flex" class="navBar">
                <div class="navBarItem activeNavBarItem">智慧照明</div>
                <div class="navBarItem">智慧灯杆</div>
                <div class="navBarItem">资产管理</div>
                <div class="navBarItem">维护管理</div>
            </div>
            <div style="display: flex; margin-right: 20px">
                <div style="display: flex; border-right: 1px solid #fff; align-items: flex-end">
                    <div style="margin-right: 10px;">
                        <img src="./img/tianqi.png" style="width: 32px;height: 32px; vertical-align: bottom" alt="">
                    </div>
                    <div style="margin-right: 10px;">
                        <div style="font-size: 18px">20:00:00</div>
                        <div style="font-size: 12px">22/08/30</div>
                    </div>
                </div>
                <!--                <div>|</div>-->
                <div style="display:flex; align-items: center; margin: 0 10px">
                    <div style="margin-right: 10px;">
                        <img src="./img/shezhi.png" style="width: 24px;height: 24px;" alt="">
                    </div>
                    <div>
                        <img src="./img/yonghu.png" style="width: 24px;height: 24px;" alt="">
                    </div>
                </div>
            </div>
        </div>

        <!-- 左侧 -->
        <div class="left" id="oneTime">
            <div class="leftBox">
                <div class="top">
                    <div class="zuo">
                        <img src="./img/taiyang.png" style="width: 64px;height: 64px;" alt="">
                    </div>
                    <div class="you" style="margin-left: 15px;">
                        <div>
                            <div style="font-size: 14px">当前照度</div>
                            <div style="font-size: 22px; margin: 5px 0"><span style="color: rgb(211, 215, 104)">65535</span> lux</div>
                            <div style="font-size: 12px; color: rgb(145, 173, 185)">开灯照度 30 lux | 关灯照度 25 lux</div>
                        </div>
                        <div style="font-size: 12px">
                            09-02 14:50:50
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div style="font-size: 20px; padding-bottom: 10px" class="borderBottom">今日信息</div>
                    <div style="padding: 10px 15px 0; display: flex; flex-wrap: wrap; justify-content: space-between">
                        <div>
                            <div>计划开灯 <span style="margin-left: 10px;">18:05</span></div>
                            <div style="margin-top: 5px;">实际开灯 <span style="margin-left: 10px;">--:--</span></div>
                        </div>
                        <div>
                            <div>计划关灯 <span style="margin-left: 10px;">06:30</span></div>
                            <div style="margin-top: 5px;">实际关灯 <span style="margin-left: 10px;">06:30</span></div>
                        </div>
                    </div>
                    <div style="display: flex; justify-content: center">
                        <div style="width: 50%;height: 200px;position: relative">
                            <div style="width: 100%;height: 100%;display: flex; justify-content: center" id="oneChart"></div>
                            <div style="position: absolute; top: 70px;left: 120px;">
                                <div style="font-size: 20px; color: rgb(230, 246, 126)">95%</div>
                                <div style="font-size: 14px">亮灯率</div>
                            </div>
                        </div>
                        <div style="width: 50%;height: 200px; position: relative">
                            <div style="width: 100%;height: 100%;" id="twoChart"></div>
                            <div style="position: absolute; top: 70px;left: 120px;">
                                <div style="font-size: 20px; color: rgb(230, 246, 126)">95%</div>
                                <div style="font-size: 14px">设备 <br> 在线率</div>
                            </div>
                        </div>
                    </div>
                    <div style="font-size: 20px; padding-bottom: 10px" class="borderBottom">功率变化趋势</div>
                    <div id="threeChart" style="width: 100%;height: 150px;margin-top: 20px;"></div>
                </div>
            </div>
            <div class="rightBox" style="margin-left: 10px;">
                <div class="top">
                    <div style="display: flex; align-items: center; background-color: rgba(0, 0, 0, 0.7);">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass guandengClass"></div>
                        <div style="margin: 0 5px">异常关灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass guandengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass guandengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                     <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass guandengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                </div> 

                <div class="bottom" style="margin-top: 10px;">
                    <div style="display: flex; align-items: center; background-color: rgba(0, 0, 0, 0.7);">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass guandengClass"></div>
                        <div style="margin: 0 5px">异常关灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass guandengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass guandengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass guandengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                </div> 
            </div>
        </div>

        <!-- 右侧 -->
        <div class="right" id="rightOne">
            <div class="top">
                <div style="font-size: 20px; padding-bottom: 10px;" class="borderBottom">基础信息</div>
                <div style="display: flex; margin-top: 10px; margin-bottom: 20px; margin-left: 65px;flex-wrap: wrap">
                    <div style="display: flex; align-items: center; width: 33.3%;">
                        <div style="width: 45px;height: 45px;border-radius: 50%; border: 3px solid #40a9ff"></div>
                        <div style="margin-left: 10px;">
                            <div style="color: rgb(136, 226, 228); font-size: 20px">875</div>
                            <div style="font-size: 12px;margin-top: 5px;">路灯配电柜</div>
                        </div>
                    </div>
                    <div style="display: flex; align-items: center; width: 33.3%;">
                        <div style="width: 45px;height: 45px;border-radius: 50%; border: 3px solid #40a9ff"></div>
                        <div style="margin-left: 10px;">
                            <div style="color: rgb(136, 226, 228); font-size: 20px">875</div>
                            <div style="font-size: 12px;margin-top: 5px;">路灯配电柜</div>
                        </div>
                    </div>
                    <div style="display: flex; align-items: center; width: 33.3%;">
                        <div style="width: 45px;height: 45px;border-radius: 50%; border: 3px solid #40a9ff"></div>
                        <div style="margin-left: 10px;">
                            <div style="color: rgb(136, 226, 228); font-size: 20px">875</div>
                            <div style="font-size: 12px;margin-top: 5px;">路灯配电柜</div>
                        </div>
                    </div>
                    <div style="display: flex; width: 100%;margin-top: 10px;">
                        <div style="display: flex; align-items: center; width: 33.3%;">
                            <div style="width: 45px;height: 45px;border-radius: 50%; border: 3px solid #40a9ff"></div>
                            <div style="margin-left: 10px;">
                                <div style="color: rgb(136, 226, 228); font-size: 20px">875</div>
                                <div style="font-size: 12px; margin-top: 5px;">路灯配电柜</div>
                            </div>
                        </div>
                        <div style="display: flex; align-items: center; width: 33.3%;">
                            <div style="width: 45px;height: 45px;border-radius: 50%; border: 3px solid #40a9ff"></div>
                            <div style="margin-left: 10px;">
                                <div style="color: rgb(136, 226, 228); font-size: 20px">875</div>
                                <div style="font-size: 12px;margin-top: 5px;">路灯配电柜</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="font-size: 20px; padding-bottom: 10px;" class="borderBottom">监控设备统计</div>
                <div style="width: 100%;display: flex; flex-wrap: wrap; position: relative">
                    <div id="fourChart" style="width: 33.3%;height: 100px;"></div>
                    <div style="position: absolute; left: 130px;top: 25px;">
                        <div style="font-size: 22px; color: rgb(230, 246, 126)">875</div>
                        <div style="font-size: 12px; color: #ccc">单灯控制器</div>
                    </div>
                    <div id="fiveChart" style="width: 33.3%;height: 100px;"></div>
                    <div style="position: absolute; left: 315px;top: 25px;">
                        <div style="font-size: 22px; color: rgb(230, 246, 126)">875</div>
                        <div style="font-size: 12px; color: #ccc">照明集控器</div>
                    </div>
                    <div id="sixChart" style="width: 33.3%;height: 100px;"></div>
                    <div style="position: absolute; left: 495px;top: 25px;">
                        <div style="font-size: 22px; color: rgb(230, 246, 126)">875</div>
                        <div style="font-size: 12px; color: #ccc">照明集控器</div>
                    </div>
                    <div id="sevenChart" style="width: 33.3%;height: 100px;"></div>
                    <div style="position: absolute; left: 130px;top: 125px;">
                        <div style="font-size: 22px; color: rgb(230, 246, 126)">875</div>
                        <div style="font-size: 12px; color: #ccc">照明集控器</div>
                    </div>
                    <div id="eightChart" style="width: 33.3%;height: 100px;"></div>
                    <div style="position: absolute; left: 315px;top: 125px;">
                        <div style="font-size: 22px; color: rgb(230, 246, 126)">875</div>
                        <div style="font-size: 12px; color: #ccc">网络摄像机</div>
                    </div>
                </div>
            </div>
             <div class="bottom">
                <div class="borderBottom" style="display: flex; padding-bottom: 10px">
                    <div style="width: 30%;text-align: center">时间</div>
                    <div style="width: 30%;text-align: center">设备</div>
                    <div style="width: 30%;text-align: center">故障</div>
                </div>
                <div>
                    <div class="contentItem">
                        <div style="display: flex; align-items: center; width: 30%;justify-content: center">
                            <img src="./img/taiyang.png" style="width: 12px;height: 12px;" alt="">
                            <div>06-15 13:52:53</div>
                        </div>
                        <div style="width: 30%; text-align: center">0001-汉中路</div>
                        <div style="width: 30%; text-align: center">供电停电</div>
                    </div>
                    <div class="contentItem contentItemActive">
                        <div style="display: flex; align-items: center; width: 30%;justify-content: center">
                            <img src="./img/taiyang.png" style="width: 12px;height: 12px;" alt="">
                            <div>06-15 13:52:53</div>
                        </div>
                        <div style="width: 30%; text-align: center">0001-汉中路</div>
                        <div style="width: 30%; text-align: center">供电停电</div>
                    </div>
                    <div class="contentItem">
                        <div style="display: flex; align-items: center; width: 30%;justify-content: center">
                            <img src="./img/taiyang.png" style="width: 12px;height: 12px;" alt="">
                            <div>06-15 13:52:53</div>
                        </div>
                        <div style="width: 30%; text-align: center">0001-汉中路</div>
                        <div style="width: 30%; text-align: center">供电停电</div>
                    </div>
                    <div class="contentItem contentItemActive">
                        <div style="display: flex; align-items: center; width: 30%;justify-content: center">
                            <img src="./img/taiyang.png" style="width: 12px;height: 12px;" alt="">
                            <div>06-15 13:52:53</div>
                        </div>
                        <div style="width: 30%; text-align: center">0001-汉中路</div>
                        <div style="width: 30%; text-align: center">供电停电</div>
                    </div>
                    <div class="contentItem contentItemActive">
                        <div style="display: flex; align-items: center; width: 30%;justify-content: center">
                            <div></div>
                        </div>
                        <div style="width: 30%; text-align: center"></div>
                        <div style="width: 30%; text-align: center"></div>
                    </div>
                </div>
            </div> 
        </div>

        <!-- 左侧 -->
        <div class="left" id="twoTime">
            <div class="leftBox">
                <div class="top">
                    <div class="zuo">
                        <img src="./img/taiyang.png" style="width: 64px;height: 64px;" alt="">
                    </div>
                    <div class="you" style="margin-left: 15px;">
                        <div>
                            <div style="font-size: 14px">当前照度111</div>
                            <div style="font-size: 22px; margin: 5px 0"><span style="color: rgb(211, 215, 104)">65535</span> lux</div>
                            <div style="font-size: 12px; color: rgb(145, 173, 185)">开灯照度 30 lux | 关灯照度 25 lux</div>
                        </div>
                        <div style="font-size: 12px">
                            09-02 14:50:50
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div style="font-size: 20px; padding-bottom: 10px" class="borderBottom">今日信息</div>
                    <div style="padding: 10px 15px 0; display: flex; flex-wrap: wrap; justify-content: space-between">
                        <div>
                            <div>计划开灯 <span style="margin-left: 10px;">18:05</span></div>
                            <div style="margin-top: 5px;">实际开灯 <span style="margin-left: 10px;">--:--</span></div>
                        </div>
                        <div>
                            <div>计划关灯 <span style="margin-left: 10px;">06:30</span></div>
                            <div style="margin-top: 5px;">实际关灯 <span style="margin-left: 10px;">06:30</span></div>
                        </div>
                    </div>
                    <div style="display: flex; justify-content: center">
                        <div style="width: 50%;height: 200px;position: relative">
                            <div style="width: 100%;height: 100%;display: flex; justify-content: center" id="oneChart"></div>
                            <div style="position: absolute; top: 70px;left: 120px;">
                                <div style="font-size: 20px; color: rgb(230, 246, 126)">95%</div>
                                <div style="font-size: 14px">亮灯率</div>
                            </div>
                        </div>
                        <div style="width: 50%;height: 200px; position: relative">
                            <div style="width: 100%;height: 100%;" id="twoChart"></div>
                            <div style="position: absolute; top: 70px;left: 120px;">
                                <div style="font-size: 20px; color: rgb(230, 246, 126)">95%</div>
                                <div style="font-size: 14px">设备 <br> 在线率</div>
                            </div>
                        </div>
                    </div>
                    <div style="font-size: 20px; padding-bottom: 10px" class="borderBottom">功率变化趋势</div>
                    <div id="threeChart" style="width: 100%;height: 150px;margin-top: 20px;"></div>
                </div>
            </div>
            <div class="rightBox" style="margin-left: 10px;">
                <div class="top">
                    <div style="display: flex; align-items: center; background-color: rgba(0, 0, 0, 0.7);">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass guandengClass"></div>
                        <div style="margin: 0 5px">异常关灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass guandengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass guandengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass guandengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                </div>

                 <div class="bottom" style="margin-top: 10px;">
                    <div style="display: flex; align-items: center; background-color: rgba(0, 0, 0, 0.7);">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass guandengClass"></div>
                        <div style="margin: 0 5px">异常关灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass guandengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass guandengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                    <div style="display: flex; align-items: center">
                        <div class="defaultDengClass guandengClass"></div>
                        <div style="margin: 0 5px">异常开灯</div>
                        <div>12</div>
                    </div>
                </div> 
            </div>
        </div>

        <!-- 右侧 -->
        <div class="right" id="rightTwo">
            <div class="top">
                <div style="font-size: 20px; padding-bottom: 10px;" class="borderBottom">基础信息</div>
                <div style="display: flex; margin-top: 10px; margin-bottom: 20px; margin-left: 65px;flex-wrap: wrap">
                    <div style="display: flex; align-items: center; width: 33.3%;">
                        <div style="width: 45px;height: 45px;border-radius: 50%; border: 3px solid #40a9ff"></div>
                        <div style="margin-left: 10px;">
                            <div style="color: rgb(136, 226, 228); font-size: 20px">875</div>
                            <div style="font-size: 12px;margin-top: 5px;">路灯配电柜</div>
                        </div>
                    </div>
                    <div style="display: flex; align-items: center; width: 33.3%;">
                        <div style="width: 45px;height: 45px;border-radius: 50%; border: 3px solid #40a9ff"></div>
                        <div style="margin-left: 10px;">
                            <div style="color: rgb(136, 226, 228); font-size: 20px">875</div>
                            <div style="font-size: 12px;margin-top: 5px;">路灯配电柜</div>
                        </div>
                    </div>
                    <div style="display: flex; align-items: center; width: 33.3%;">
                        <div style="width: 45px;height: 45px;border-radius: 50%; border: 3px solid #40a9ff"></div>
                        <div style="margin-left: 10px;">
                            <div style="color: rgb(136, 226, 228); font-size: 20px">875</div>
                            <div style="font-size: 12px;margin-top: 5px;">路灯配电柜</div>
                        </div>
                    </div>
                    <div style="display: flex; width: 100%;margin-top: 10px;">
                        <div style="display: flex; align-items: center; width: 33.3%;">
                            <div style="width: 45px;height: 45px;border-radius: 50%; border: 3px solid #40a9ff"></div>
                            <div style="margin-left: 10px;">
                                <div style="color: rgb(136, 226, 228); font-size: 20px">875</div>
                                <div style="font-size: 12px; margin-top: 5px;">路灯配电柜</div>
                            </div>
                        </div>
                        <div style="display: flex; align-items: center; width: 33.3%;">
                            <div style="width: 45px;height: 45px;border-radius: 50%; border: 3px solid #40a9ff"></div>
                            <div style="margin-left: 10px;">
                                <div style="color: rgb(136, 226, 228); font-size: 20px">875</div>
                                <div style="font-size: 12px;margin-top: 5px;">路灯配电柜</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="font-size: 20px; padding-bottom: 10px;" class="borderBottom">监控设备统计</div>
                <div style="width: 100%;display: flex; flex-wrap: wrap; position: relative">
                    <div id="fourChart" style="width: 33.3%;height: 100px;"></div>
                    <div style="position: absolute; left: 130px;top: 25px;">
                        <div style="font-size: 22px; color: rgb(230, 246, 126)">875</div>
                        <div style="font-size: 12px; color: #ccc">单灯控制器</div>
                    </div>
                    <div id="fiveChart" style="width: 33.3%;height: 100px;"></div>
                    <div style="position: absolute; left: 315px;top: 25px;">
                        <div style="font-size: 22px; color: rgb(230, 246, 126)">875</div>
                        <div style="font-size: 12px; color: #ccc">照明集控器</div>
                    </div>
                    <div id="sixChart" style="width: 33.3%;height: 100px;"></div>
                    <div style="position: absolute; left: 495px;top: 25px;">
                        <div style="font-size: 22px; color: rgb(230, 246, 126)">875</div>
                        <div style="font-size: 12px; color: #ccc">照明集控器</div>
                    </div>
                    <div id="sevenChart" style="width: 33.3%;height: 100px;"></div>
                    <div style="position: absolute; left: 130px;top: 125px;">
                        <div style="font-size: 22px; color: rgb(230, 246, 126)">875</div>
                        <div style="font-size: 12px; color: #ccc">照明集控器</div>
                    </div>
                    <div id="eightChart" style="width: 33.3%;height: 100px;"></div>
                    <div style="position: absolute; left: 315px;top: 125px;">
                        <div style="font-size: 22px; color: rgb(230, 246, 126)">875</div>
                        <div style="font-size: 12px; color: #ccc">网络摄像机</div>
                    </div>
                </div>
            </div>
             <div class="bottom">
                <div class="borderBottom" style="display: flex; padding-bottom: 10px">
                    <div style="width: 30%;text-align: center">时间</div>
                    <div style="width: 30%;text-align: center">设备</div>
                    <div style="width: 30%;text-align: center">故障</div>
                </div>
                <div>
                    <div class="contentItem">
                        <div style="display: flex; align-items: center; width: 30%;justify-content: center">
                            <img src="./img/taiyang.png" style="width: 12px;height: 12px;" alt="">
                            <div>06-15 13:52:53</div>
                        </div>
                        <div style="width: 30%; text-align: center">0001-汉中路</div>
                        <div style="width: 30%; text-align: center">供电停电</div>
                    </div>
                    <div class="contentItem contentItemActive">
                        <div style="display: flex; align-items: center; width: 30%;justify-content: center">
                            <img src="./img/taiyang.png" style="width: 12px;height: 12px;" alt="">
                            <div>06-15 13:52:53</div>
                        </div>
                        <div style="width: 30%; text-align: center">0001-汉中路</div>
                        <div style="width: 30%; text-align: center">供电停电</div>
                    </div>
                    <div class="contentItem">
                        <div style="display: flex; align-items: center; width: 30%;justify-content: center">
                            <img src="./img/taiyang.png" style="width: 12px;height: 12px;" alt="">
                            <div>06-15 13:52:53</div>
                        </div>
                        <div style="width: 30%; text-align: center">0001-汉中路</div>
                        <div style="width: 30%; text-align: center">供电停电</div>
                    </div>
                    <div class="contentItem contentItemActive">
                        <div style="display: flex; align-items: center; width: 30%;justify-content: center">
                            <img src="./img/taiyang.png" style="width: 12px;height: 12px;" alt="">
                            <div>06-15 13:52:53</div>
                        </div>
                        <div style="width: 30%; text-align: center">0001-汉中路</div>
                        <div style="width: 30%; text-align: center">供电停电</div>
                    </div>
                    <div class="contentItem contentItemActive">
                        <div style="display: flex; align-items: center; width: 30%;justify-content: center">
                            <div></div>
                        </div>
                        <div style="width: 30%; text-align: center"></div>
                        <div style="width: 30%; text-align: center"></div>
                    </div>
                </div>
            </div>
        </div> 

        <!-- 底部 -->
        <div class="footer" style="display: flex">
            <div style="display: flex; align-items: center; flex-direction: column" class="footerItem" data-index="0">
                <div style="width: 40px;height: 40px; border-radius: 50%; border: 2px solid #fff;">
                    <img src="./img/taiyang.png" style="width: 40px;height: 40px;" alt="">
                </div>
                <div style="text-align: center; margin-top: 15px;">照明监控</div>
            </div>
            <div style="display: flex; align-items: center; flex-direction: column" class="footerItem" data-index="1">
                <div style="width: 40px;height: 40px; border-radius: 50%; border: 2px solid #fff;">
                    <img src="./img/taiyang.png" style="width: 40px;height: 40px;" alt="">
                </div>
                <div style="text-align: center; margin-top: 15px;">照明监控2</div>
            </div>
            <div style="display: flex; align-items: center; flex-direction: column" class="footerItem" data-index="2">
                <div style="width: 40px;height: 40px; border-radius: 50%; border: 2px solid #fff;">
                    <img src="./img/taiyang.png" style="width: 40px;height: 40px;" alt="">
                </div>
                <div style="text-align: center; margin-top: 15px;">照明监控3</div>
            </div>
            <div style="display: flex; align-items: center; flex-direction: column" class="footerItem" data-index="3">
                <div style="width: 40px;height: 40px; border-radius: 50%; border: 2px solid #fff;">
                    <img src="./img/taiyang.png" style="width: 40px;height: 40px;" alt="">
                </div>
                <div style="text-align: center; margin-top: 15px;">照明监控4</div>
            </div>
        </div>

    </div>
    <script type="text/javascript">
        $('.footerItem').on('click', function() {
            var index = $(this).attr('data-index')
            console.log(index);
            if (index == 0) {
                $('#oneTime').css('visibility', 'visible')
                $('#rightOne').css('visibility', 'visible')
                $("#rightOne").animate({
                    right: '40px'
                }, 1000)
                $("#oneTime").animate({
                    left: '20px',
                }, 1000)
            } else if (index == 1) {
                setTimeout(() => {
                    $('#oneTime').css('visibility', 'hidden')
                    $('#rightOne').css('visibility', 'hidden')
                }, 1000)
                $('#twoTime').css('visibility', 'visible')
                $('#rightTwo').css('visibility', 'visible')
                $("#twoTime").animate({
                    left: '20px',
                    display: 'block'
                });
                $('#oneTime').animate({
                    left: '-9999px',
                    display: 'none'
                }, 1000);
                $("#rightOne").animate({
                    right: '-9999px',
                    display: 'none'
                }, 1000)
                $('#rightTwo').animate({
                    right: '40px',
                    display: 'block'
                })
            }
        })

        function initmap() {
            
            map = new BMapGL.Map('container'); // 创建Map实例
            var lat = "39.915";
            var lng = "116.404";
            map.centerAndZoom(new BMapGL.Point(lng, lat), 16); // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
            map.setMapStyleV2({
                styleJson: styleJson
            });
        }

        function initCharts() {
            oneChartHandle()
            twoChartHandle()
            threeChartHandle()
            fourChartHandle()
        }

        function oneChartHandle() {
            var chartDom = document.getElementById('oneChart');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: [{
                    text: '西赣市',
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    },
                    textAlign: 'center',
                    x: '34.5%',
                    y: '44%'
                }],
                series: [{
                    name: 'Access From',
                    type: 'pie',
                    center: ['35%', '50%'],
                    radius: ['20%', '65%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold',
                            color: '#ccc'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [{
                        value: 1048,
                        name: '79-8.5%'
                    }, {
                        value: 735,
                        name: '79-7.1%'
                    }, {
                        value: 580,
                        name: '79-7.2%'
                    }, {
                        value: 484,
                        name: '79-7.3%'
                    }, {
                        value: 300,
                        name: '79-7.4%'
                    }, {
                        value: 300,
                        name: '79-7.5%'
                    }, {
                        value: 300,
                        name: '79-7.6%'
                    }, {
                        value: 300,
                        name: '79-7.7%'
                    }, {
                        value: 300,
                        name: '79-7.8%'
                    }, {
                        value: 300,
                        name: '79-7.9%'
                    }]
                }]
            };

            option && myChart.setOption(option);
        }

        function twoChartHandle() {
            var chartDom = document.getElementById('twoChart');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: [{
                    text: '西赣市',
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    },
                    textAlign: 'center',
                    x: '34.5%',
                    y: '44%'
                }],
                series: [{
                    name: 'Access From',
                    type: 'pie',
                    center: ['35%', '50%'],
                    radius: ['20%', '65%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold',
                            color: '#ccc'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [{
                        value: 1048,
                        name: '79-8.5%'
                    }, {
                        value: 735,
                        name: '79-7.1%'
                    }, {
                        value: 580,
                        name: '79-7.2%'
                    }, {
                        value: 484,
                        name: '79-7.3%'
                    }, {
                        value: 300,
                        name: '79-7.4%'
                    }, {
                        value: 300,
                        name: '79-7.5%'
                    }, {
                        value: 300,
                        name: '79-7.6%'
                    }, {
                        value: 300,
                        name: '79-7.7%'
                    }, {
                        value: 300,
                        name: '79-7.8%'
                    }, {
                        value: 300,
                        name: '79-7.9%'
                    }]
                }]
            };

            option && myChart.setOption(option);
        }

        function threeChartHandle() {
            var chartDom = document.getElementById('threeChart');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                grid: {
                    top: "5%",
                    // bottom: "10%"//也可设置left和right设置距离来控制图表的大小
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        label: {
                            show: true
                        }
                    }
                },

                xAxis: {
                    data: [
                        "00:00",
                        "04:00",
                        "08:00",
                        "12:00",
                        "16:00",
                        "20:00",
                        "24:00",

                    ],
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: '#01FCE3'
                        }
                    },
                    axisTick: {
                        show: true //隐藏X轴刻度
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#ccc" //X轴文字颜色
                        }
                    },

                },
                yAxis: [{
                    type: "value",
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#ccc"
                        }
                    },

                }, {
                    type: "value",
                    name: "",
                    nameTextStyle: {
                        color: "#ebf8ac"
                    },
                    position: "right",
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },

                }, {
                    type: "value",
                    gridIndex: 0,
                    min: 50,
                    max: 100,
                    splitNumber: 8,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgb(24, 44, 68)'
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },

                }],
                series: [{
                    name: "1",
                    type: "line",
                    yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                    smooth: true, //平滑曲线显示
                    showAllSymbol: true, //显示所有图形。
                    symbol: "circle", //标记的图形为实心圆
                    symbolSize: 1, //标记的大小
                    itemStyle: {
                        //折线拐点标志的样式
                        color: "rgb(111, 153, 185)"
                    },
                    lineStyle: {
                        color: "rgb(111, 153, 185)"
                    },
                    areaStyle: {
                        color: "rgb(43, 85, 121)"
                    },
                    data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3]
                }, {
                    name: "2",
                    type: "line",
                    yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                    smooth: true, //平滑曲线显示
                    showAllSymbol: true, //显示所有图形。
                    symbol: "circle", //标记的图形为实心圆
                    symbolSize: 1, //标记的大小
                    itemStyle: {
                        //折线拐点标志的样式
                        color: "rgb(111, 153, 185)"
                    },
                    lineStyle: {
                        color: "rgb(111, 153, 185)"
                    },
                    areaStyle: {
                        color: "rgb(43, 85, 121)"
                    },
                    data: [1.2, 2.8, 3.8, 4.5, 5.9, 6.8, 7]
                }, {
                    name: "3",
                    type: "bar",
                    barWidth: 15,
                    itemStyle: {
                        color: "rgb(45, 117, 175)"
                    },
                    data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3]
                }]
            }

            option && myChart.setOption(option);
        }

        function fourChartHandle() {
            var chartDom = document.getElementById('fourChart');
            var twoChartDom = document.getElementById('fiveChart');
            var threeChartDom = document.getElementById('sixChart');
            var fourChartDom = document.getElementById('sevenChart');
            var fiveChartDom = document.getElementById('eightChart');
            var myChart = echarts.init(chartDom);
            var myChart2 = echarts.init(twoChartDom);
            var myChart3 = echarts.init(threeChartDom);
            var myChart4 = echarts.init(fourChartDom);
            var myChart5 = echarts.init(fiveChartDom);
            var option;

            option = {
                series: [{
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    labelLine: {
                        show: false
                    },
                    data: [{
                        value: 1048,
                        name: 'Search Engine',
                        itemStyle: {
                            color: 'rgb(139, 193, 114)'
                        }
                    }, {
                        value: 735,
                        name: 'Direct',
                        itemStyle: {
                            color: 'rgb(79, 105, 192)'
                        }
                    }]
                }]
            };

            option && myChart.setOption(option);
            option && myChart2.setOption(option);
            option && myChart3.setOption(option);
            option && myChart4.setOption(option);
            option && myChart5.setOption(option);
        }

        setTimeout(() => {
            initmap()
            initCharts()
        }, 0)


        var styleJson = [{
            "featureType": "land",
            "elementType": "geometry",
            "stylers": {
                "visibility": "on",
                "color": "#064C7D"
            }
        }, {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": {
                "visibility": "on",
                "color": "#113549ff"
            }
        }, {
            "featureType": "green",
            "elementType": "geometry",
            "stylers": {
                "visibility": "on",
                "color": "#064C7D"
            }
        }, {
            "featureType": "building",
            "elementType": "geometry",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "building",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "building",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "subwaystation",
            "elementType": "geometry",
            "stylers": {
                "visibility": "on",
                "color": "#b15454B2"
            }
        }, {
            "featureType": "education",
            "elementType": "geometry",
            "stylers": {
                "visibility": "on",
                "color": "#064C7D"
            }
        }, {
            "featureType": "medical",
            "elementType": "geometry",
            "stylers": {
                "visibility": "on",
                "color": "#064C7D"
            }
        }, {
            "featureType": "scenicspots",
            "elementType": "geometry",
            "stylers": {
                "visibility": "on",
                "color": "#064C7D"
            }
        }, {
            "featureType": "highway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "on",
                "weight": 4
            }
        }, {
            "featureType": "highway",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#f7c54dff"
            }
        }, {
            "featureType": "highway",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#fed669ff"
            }
        }, {
            "featureType": "highway",
            "elementType": "labels",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "highway",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#8f5a33ff"
            }
        }, {
            "featureType": "highway",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "highway",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
                "visibility": "on",
                "weight": 2
            }
        }, {
            "featureType": "arterial",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "arterial",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "arterial",
            "elementType": "labels",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "arterial",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#525355ff"
            }
        }, {
            "featureType": "arterial",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "local",
            "elementType": "geometry",
            "stylers": {
                "visibility": "on",
                "weight": 1
            }
        }, {
            "featureType": "local",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "local",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "local",
            "elementType": "labels",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "local",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "local",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "railway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "on",
                "weight": 1
            }
        }, {
            "featureType": "railway",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#123c52ff"
            }
        }, {
            "featureType": "railway",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#12223dff"
            }
        }, {
            "featureType": "subway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "on",
                "weight": 1
            }
        }, {
            "featureType": "subway",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "subway",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#ffffff00"
            }
        }, {
            "featureType": "subway",
            "elementType": "labels",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "subway",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "subway",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "continent",
            "elementType": "labels",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "continent",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "continent",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#333333ff"
            }
        }, {
            "featureType": "continent",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "city",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "city",
            "elementType": "labels",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "city",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#454d50ff"
            }
        }, {
            "featureType": "city",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "town",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "town",
            "elementType": "labels",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "town",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#454d50ff"
            }
        }, {
            "featureType": "town",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "road",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#12223dff"
            }
        }, {
            "featureType": "poilabel",
            "elementType": "labels",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "districtlabel",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "road",
            "elementType": "geometry",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "road",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "road",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#ffffff00"
            }
        }, {
            "featureType": "district",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "poilabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "poilabel",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#2dc4bbff"
            }
        }, {
            "featureType": "poilabel",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#ffffff00"
            }
        }, {
            "featureType": "manmade",
            "elementType": "geometry",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "districtlabel",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "entertainment",
            "elementType": "geometry",
            "stylers": {
                "color": "#064C7D"
            }
        }, {
            "featureType": "shopping",
            "elementType": "geometry",
            "stylers": {
                "color": "#064C7D"
            }
        }];
    </script>
</body>

</html>